<script setup>
import HomeNavBar from '@/views/home/cpns/home-nav-bar.vue';
import HomeSearchBox from '@/views/home/cpns/home-search-box.vue';

// 发送网络请求
import useHomeStore from '@/stores/modules/home.js';
import HomeCategories from '@/views/home/cpns/home-categories.vue';
import HomeContent from '@/views/home/cpns/home-content.vue';
import { storeToRefs } from 'pinia';
import SearchBar from '@/components/search-bar/search-bar.vue';
const homeStrore = useHomeStore();
homeStrore.fetchHotCitiesData();
homeStrore.fetchCategoriesData();
homeStrore.fetchHouselistData();
const { currentPage } = storeToRefs(homeStrore);
const moreClick = () => {
  currentPage.value += 1;
  homeStrore.fetchHouselistData();
};
</script>
<template>
  <div class="home">
    <home-nav-bar />
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="" />
    </div>
    <home-search-box />
    <home-categories />
    <div class="search-bar">
      <search-bar :start-date="'09.19'" :end-date="'09.20'" />
    </div>
    <home-content />
    <button @click="moreClick">加载更多</button>
  </div>
</template>

<style lang="less" scoped>
.home {
  padding-bottom: 60px;
}
.banner {
  img {
    width: 100%;
  }
}
.search-bar {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  padding: 16px 16px 10px;
  background-color: #fff;
}
</style>
